<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    </head>

    <body>
        <div id="app">
            <el-row>
                <el-col :span="24">
                <div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
                </el-col>
            </el-row>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            echarts,
            data: {
                option: {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '项目',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            center: ['50%', '70%'],
                            // adjust the start and end angle
                            startAngle: 180,
                            endAngle: 360,
                            padAngle: 2,
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads', itemStyle: {color: '#eee'} },
                            ]
                        },
                    ]
                }
            },
            mounted() {
                this.draw();
            },
            methods: {
                draw() {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById("myChart"));
                    myChart.setOption(this.option);
                },
            }
        })
    </script>
</html>
